<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>国际象棋</title>
</head>
<body>
  <div id="box">

    <div id="help" style="background-color: bisque;">
      <h3 style="text-align: center; margin: auto;">国际象棋帮助</h3>
      <table>
        <tbody>
          <tr>
            <th>指令</th>
            <th>说明</th>
            <th>示例</th>
          </tr>
          <tr>
            <th>{{prefix}}发起/加入国际象棋<br></td>
            <td>发起游戏</td>
            <td>{{prefix}}发起国际象棋、{{prefix}}加入国际象棋</td>
          </tr>
          <tr>
            <th>{{prefix}}加入国际象棋+黑/白<br></td>
            <td>游戏中途加入队伍，加入队伍后可操作棋盘</td>
            <td>{{prefix}}加入国际象棋黑、{{prefix}}加入国际象棋白</td>
          </tr>
          <tr>
            <th>{{prefix}}移动</td>
            <td>移动棋子，{{prefix}}移动+选择+目的地，示例中意思为将g4的棋子移动到e4的位置</td>
            <td>{{prefix}}移动g4e4</td>
          </tr>
          <tr>
            <th>{{prefix}}结束游戏</td>
            <td>认输</td>
            <td>{{prefix}}结束游戏</td>
          </tr>
        </tbody>
        <colgroup>
          <col>
          <col>
          <col>
        </colgroup>
      </table>
    </div>
    
  </div>
  <div style="text-align: center;">Created by qq-bot & 国际象棋</div>
  <style>
    body{
      background-color: bisque;
    }
    #app{
      display: flex;
    }
    #box{
      display: flex;
      justify-content:center;
      flex-wrap: wrap;
      background-image: url('{{鸡鸡地址}}img/国际象棋背景.svg');
      background-size: cover;
    }
    #box .lattice{
      width: 96px;
      height: 96px;
      margin: 1px;
      background-size: cover;
    }
    th{
      text-align: center;
      background-color: #fddbb3;
    }
    th, td, th, #help{
      border: 2px solid #B58863;
      border-left-color: #fff;
      border-top-color: #fff;
      text-align: left;
      padding: 8px;
    }
    .latticebox{
      width: 100%;
      height: 100%;
      background-size: cover;
    }
    .b {
      background-image: url('{{鸡鸡地址}}img/b_box.svg');
    }
    .w {
      background-image: url('{{鸡鸡地址}}img/w_box.svg');
    }
  </style>

  <script>

    let box = document.getElementById("box")
    let data_box = [] // 棋子数据

    const img = {
      
      width:{
        兵:'',
        王:'',
        后:'',
        象:'',
        车:'',
        马:'',
      },
      black:{
        兵:'',
        王:'',
        后:'',
        象:'',
        车:'',
        马:'',
      },
      空:'',
    }

    let map = '{{map}}' // 地图
    map = map.split(',');
    let archive = '{{archive}}' // 双方棋子标记
    archive = archive.split(',');
    let ss = '{{ss}}' // 移动轨迹地图
    ss = ss.split(',');

    let ishelp = '{{ishelp}}'
    if(ishelp === 'off') {
      document.getElementById("help").innerHTML = ""

      
      map.forEach((e,index)=> {
      if(e !== '空' && archive[index] == '黑') { // 玩家A，黑棋
        if(ss[index] == '黑box'){
          data_box.push(`<div class="lattice" style="background-image: url('${img.black[e]}')"><div class="b latticebox"></div></div>`)
        }else{
          data_box.push(`<div class="lattice" style="background-image: url('${img.black[e]}')"></div>`)
        }
      }
      if(e !== '空' && archive[index] == '白') { // 玩家A，黑棋
        if(ss[index] == '白box'){
          data_box.push(`<div class="lattice" style="background-image: url('${img.width[e]}')"><div class="w latticebox"></div></div>`)
        }else{
          data_box.push(`<div class="lattice" style="background-image: url('${img.width[e]}')"></div>`)
        }
      }
      if(e === '空'){
        if(ss[index] == '黑box'){
          data_box.push(`<div class="lattice"><div class="b latticebox"></div></div>`)
        }else if (ss[index] == '白box'){
          data_box.push(`<div class="lattice"><div class="w latticebox"></div></div>`)
        }else{
          data_box.push(`<div class="lattice"></div>`)
        }
      }
    });

    box.innerHTML = data_box.join('')
    }

  </script>
  
</body>
</html>